<template>
  <div 
    class="bx-image-viewer"
    v-if="visible"
    @click.self="handleOverlayClick"
  >
    <div class="bx-image-viewer__toolbar">
      <BxIcon name="zoom-in" @click="zoomIn" />
      <BxIcon name="zoom-out" @click="zoomOut" />
      <BxIcon name="rotate-cw" @click="rotateRight" />
      <BxIcon name="rotate-ccw" @click="rotateLeft" />
      <BxIcon name="x" @click="close" />
    </div>
    <img 
      :src="currentImage"
      :style="imageStyle"
      @mousedown="handleMouseDown"
      class="bx-image-viewer__img"
    />
  </div>
</template>

<script>
import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
import BxButton from "../basic/BxButton.vue"
import BxIcon from "../basic/BxIcon.vue"

export default {
  name: 'BxImageViewer',
  components: {
    BxIcon
  },
  props: {
    images: {
      type: Array,
      default: () => []
    },
    modelValue: {
      type: Boolean,
      default: false
    },
    initialIndex: {
      type: Number,
      default: 0
    }
  },
  emits: ['update:modelValue', 'close'],
  setup(props, { emit }) {
    const visible = ref(props.modelValue)
    const currentIndex = ref(props.initialIndex)
    const scale = ref(1)
    const rotate = ref(0)
    const translateX = ref(0)
    const translateY = ref(0)
    let isDragging = false
    let startX = 0
    let startY = 0

    const currentImage = computed(() => props.images[currentIndex.value])

    const imageStyle = computed(() => ({
      transform: `translate(${translateX.value}px, ${translateY.value}px) scale(${scale.value}) rotate(${rotate.value}deg)`,
      transition: isDragging ? 'none' : 'transform 0.3s ease',
      cursor: scale.value > 1 ? 'grab' : 'default'
    }))

    watch(() => props.modelValue, (newVal) => {
      visible.value = newVal
      if (newVal) {
        resetTransform()
      }
    })

    watch(() => props.initialIndex, (newIndex) => {
      currentIndex.value = newIndex
      resetTransform()
    })

    const resetTransform = () => {
      scale.value = 1
      rotate.value = 0
      translateX.value = 0
      translateY.value = 0
    }

    const zoomIn = () => {
      scale.value = Math.min(scale.value + 0.1, 3)
    }

    const zoomOut = () => {
      scale.value = Math.max(scale.value - 0.1, 0.5)
    }

    const rotateRight = () => {
      rotate.value = (rotate.value + 90) % 360
    }

    const rotateLeft = () => {
      rotate.value = (rotate.value - 90) % 360
    }

    const close = () => {
      visible.value = false
      emit('update:modelValue', false)
      emit('close')
    }

    const handleOverlayClick = () => {
      close()
    }

    const handleMouseDown = (e) => {
      if (scale.value > 1) {
        isDragging = true
        startX = e.clientX - translateX.value
        startY = e.clientY - translateY.value
        document.addEventListener('mousemove', handleMouseMove)
        document.addEventListener('mouseup', handleMouseUp)
      }
    }

    const handleMouseMove = (e) => {
      if (isDragging) {
        translateX.value = e.clientX - startX
        translateY.value = e.clientY - startY
      }
    }

    const handleMouseUp = () => {
      isDragging = false
      document.removeEventListener('mousemove', handleMouseMove)
      document.removeEventListener('mouseup', handleMouseUp)
    }

    onUnmounted(() => {
      document.removeEventListener('mousemove', handleMouseMove)
      document.removeEventListener('mouseup', handleMouseUp)
    })

    return {
      visible,
      currentImage,
      imageStyle,
      zoomIn,
      zoomOut,
      rotateRight,
      rotateLeft,
      close,
      handleOverlayClick,
      handleMouseDown
    }
  }
}
</script>

<style scoped>
.bx-image-viewer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.bx-image-viewer__toolbar {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  padding: 8px 16px;
  display: flex;
  gap: 16px;
  color: #fff;
  font-size: 24px;
  z-index: 10001;
}

.bx-image-viewer__toolbar .bx-icon {
  cursor: pointer;
}

.bx-image-viewer__img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  user-select: none;
}
</style>

